import { NavBar, Toast, Tabs } from '@nutui/nutui-react';
import { ArrowLeft } from '@nutui/icons-react'
import { useNavigate } from 'react-router-dom';
import { useEffect, useState } from 'react';
import './High.css'
import $ from '../../axios'

export default function Index() {
    const Navigate = useNavigate()
    const [tab1value, setTab1value] = useState('0');
    const [list, setList] = useState([])
    const getList = async () => {
        await $.get('/getUser').then(val => {
            setList(val.data.data)
        })
    }
    useEffect(() => {
        getList()
    }, [])
    return (
        <div>
            <NavBar
                style={{ backgroundColor: 'white', '--nutui-navbar-height': '60px' }}
                back={
                    <>
                        <ArrowLeft />
                    </>
                }
                right={
                    <span className="flex-center" onClick={() => Toast.show('icon')}>

                    </span>
                }
                onBackClick={(e) => Navigate('/')}>
                优质卖家
            </NavBar>
            <Tabs className='tabs' style={{}} value={tab1value} onChange={(value) => { setTab1value(value) }}>
                <Tabs.TabPane title="认证卖家"></Tabs.TabPane>
                <Tabs.TabPane title="粉丝量"></Tabs.TabPane>
                <Tabs.TabPane title="交易量"></Tabs.TabPane>
                <Tabs.TabPane title="信誉值"></Tabs.TabPane>
            </Tabs>
            <div>
                {list.map(ele => {
                    return <div key={ele._id} style={{ marginLeft: '3%', marginBottom: '1%', display: 'flex', width: '100%', height: '60px' }}>
                        <img src={ele.img} height={50} width={50} style={{ borderRadius: '50%' }}></img>
                        <div>
                            <p>{ele.name}</p>
                            <p>123</p>
                        </div>
                        <button style={{ display: 'inline-block', float: 'right', color: "white", borderRadius: '10px', border: '0', height: '40%', width: '15%', backgroundColor: 'rgb(67,177,93)' }}>{'关注TA'}</button>
                    </div>
                })}
            </div>
        </div>
    )
}